﻿@model GoodsListModel

<style type="text/css">
    tbody .laytable-cell-1-PictureThumbnailUrl, tbody .laytable-cell-2-PictureThumbnailUrl {
        height: 100%;
        max-width: 100%;
    }
    .layui-table-view .layui-table td {
        padding: 0px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form  layui-form-pane layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="SearchName" id="SearchName" placeholder="请输入名称" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <u-select asp-for="SearchCategoryId" asp-items="Model.AvailableCategories" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">品牌</label>
                    <div class="layui-input-inline">
                        <u-select asp-for="SearchBrandId" asp-items="Model.AvailableBrands" />
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="LAY-app-contlist-search">搜索</button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn  layui-btn-normal layuiadmin-btn-tags" data-type="add">添加</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-goods-list" lay-filter="LAY-goods-list"></table>
            <script type="text/html" id="layuiadmin-app-cont-tagsbar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>
<script type="text/html" id="publishedTpl">
    <input type="checkbox" name="Published" lay-skin="switch" value="{{d.Id}}" lay-filter="published" lay-text="上架|下架" {{ d.Published ? 'checked' : ''}}>
</script>
<script>
    layui.config({
        base: '../../../layuiadmin/'
    }).extend({
        index: 'lib/index' 
    }).use(['index','table'], function () {
        var index = layer.load(2, { shade: false });
        var table = layui.table
            , form = layui.form;
        //分类管理
        table.render({
            elem: '#LAY-goods-list'
            ,method:'post'
            , url: '@Html.Raw(Url.Action("ListJson"))' //模拟接口
            , height: 'full-140'
            , page: true
            , loading:true
            , limit: 30
            , limits: [15,30,50,100]
            , cols: [[
                { type: 'numbers', fixed: 'left', style: 'height:90px;' }
                , { field: 'Id', width: 80, title: 'ID', style: 'height:90px;' }
                , { field: 'PictureThumbnailUrl', width: 100, style: 'height:90px;', title: '图片预览', templet:'<div><img src={{d.PictureThumbnailUrl}}></div>' }
                , { field: 'Name', title: '名称', style: 'height:90px;' }
                , { field: 'Sku', title: 'SKU', width: 80, align: 'center', style: 'height:90px;' }
                , { field: 'Price', title: '价格', width: 80, align: 'center', style: 'height:90px;' }
                , { field: 'StockQuantity', title: '库存', width: 80, align: 'center', style: 'height:90px;' }
                , { field: 'Published', title: '是否发布', templet: '#publishedTpl', width: 100, align: 'center', style: 'height:90px;' }
                , { title: '操作', width: 180, align: 'center', fixed: 'right', toolbar: '#layuiadmin-app-cont-tagsbar', style: 'height:90px;' }
            ]]
            , id: 'testReload'
            , text: { none: '一条数据也没有^_^' }
            , done: function () {
                layer.close(index);
            }
        });
        //监听搜索
        layui.form.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: field
            }, 'data');
        });
        //监听工具条
        table.on('tool(LAY-goods-list)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除此商品？', function (index) {
                    obj.del();
                    $.post('@Url.Action("Delete")', { id: obj.data.Id });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                var tr = $(obj.tr);
                window.location.href = '@Url.Action("Edit")?id=' + data.Id;
            }
        });

        //监听锁定操作
         form.on('switch(published)', function (obj) {
            var check = obj.elem.checked;
            $.post('@Url.Action("Published")', { Id: this.value, checked: check });
         })

        var $ = layui.$, active = {
            add: function () {
                window.location.href = '@Url.Action("Edit")';
            }
        }
        $('.layui-btn.layuiadmin-btn-tags').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
